<template>
  <li class="msg-wrapper">
    <div class="left-msg">
      <el-avatar
        class="avatar"
        shape="square"
        size="medium"
        :src="$utils.getAvatar('avatar.png')"
      ></el-avatar>
      <div class="content-box" data-name="花里花哨" :class="{ group: isGroup }">
        这是超
      </div>
    </div>
  </li>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class LeftMsg extends Vue {
  @Prop({ default: false }) isGroup?: boolean
}
</script>

<style lang="scss" scoped>
.msg-wrapper {
  display: flex;
  margin-top: 20px;
}
.left-msg {
  width: 63%;
  .avatar {
    width: 36px;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
  }
  .content-box {
    vertical-align: top;
    display: inline-block;
    user-select: text;
    margin-left: 15px;
    background-color: #fff;
    border-radius: 4px;
    padding: 10px 8px;
    line-height: 1.5;
    min-height: 35px;
    position: relative;
    top: 0;
    font-family: Arial, Helvetica, sans-serif;
    &.group::after {
      top: 18px;
      content: attr(data-name);
      display: block;
      position: absolute;
      font-size: 1rem;
      top: -20px;
      left: 0;
    }
    &::before {
      content: '';
      width: 0;
      height: 0;
      border-width: 5px;
      border-style: solid;
      border-color: transparent #fff transparent transparent;
      position: absolute;
      left: -10px;
      top: 15px;
      z-index: 2;
    }
  }
}
</style>
